import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image,ScrollView } from '@tarojs/components'
import './dialog.css'
import {  AtAvatar, AtListItem, AtList, AtInput,AtIcon,AtButton } from 'taro-ui'
import { $navigateTo,getGlobalData} from '../../../global';
import app from '../../../main.js'
// import reactMixin from 'react-mixin';
// import myJs from '../../pages/dialog/dialogjs.js'

export default class Dialog extends Component {

    config = {
        navigationBarTitleText: '刘学医'
    }
    // constructor () { 
    //     super(...arguments); 
    //     this.state = this.getData(); 
    // }
    constructor() {
        super(...arguments)
        this.state = {
            current: 0,
            value: '',
            testPath:getGlobalData('baseurl')+'img/d2.jpg',
            funBox:'display:none',
            usefulBox:'display:none',
            blankBox:'height:100px',
            addBtn:'display:block',
            sendBtn:'display:none',
            sound:'display:none',
            soundIcon:getGlobalData('baseurl')+'img/jianpan.png',
            inputBox:'display:block',
            sendBox:'padding-top:20px'
        }
    }
    handleClick(value) {
        this.setState({
            current: value
        })
    }
    handleChange(value) {
        this.setState({
            value
        },()=>{
            if(this.state.value.trim()!==''){
                this.setState({
                    addBtn:'display:none',
                    sendBtn:'display:block'
                });
            }else{
                this.setState({
                    addBtn:'display:block',
                    sendBtn:'display:none'
                });
            }
        })
    }
    go(url){
        $navigateTo(url);
    }
    getUseful(e){
        e.stopPropagation();
        this.setState({
            usefulBox:'display:block',
            funBox:'display:none',
            blankBox:'height:300px',
            sound:'display:none',
            inputBox:'display:block',
            soundIcon:getGlobalData('baseurl')+'img/jianpan.png',
            sendBox:'padding-top:20px'
        });
    }
    getFunction(e){
        e.stopPropagation();
        this.setState({
            funBox:'display:block',
            usefulBox:'display:none',
            blankBox:'height:300px',
            sound:'display:none',
            inputBox:'display:block',
            soundIcon:getGlobalData('baseurl')+'img/jianpan.png',
            sendBox:'padding-top:20px'
        });
    }
    getVoice(e){
        e.stopPropagation();
        this.setState({
            usefulBox:'display:none',
            funBox:'display:none',
            blankBox:'height:100px'
        },()=>{
            if(this.state.soundIcon===getGlobalData('baseurl')+'img/yuyin.png'){
                this.setState({
                    sound:'display:none',
                    inputBox:'display:block',
                    soundIcon:getGlobalData('baseurl')+'img/jianpan.png',
                    sendBox:'padding-top:20px'
                });
            }else{
                this.setState({
                    sound:'display:block',
                    inputBox:'display:none',
                    soundIcon:getGlobalData('baseurl')+'img/yuyin.png',
                    sendBox:'padding-top:60px'
                });
            }
        });
    }
    closeBox(){
        this.setState({
            usefulBox:'display:none',
            funBox:'display:none',
            blankBox:'height:100px'
        });
    }
    noPropagation(e){
        e.stopPropagation();
    }
    choosePhotoes=()=>{
        let that=this;
        Taro.chooseImage({
            success(res) {
              // tempFilePath可以作为img标签的src属性显示图片
              const tempFilePaths = res.tempFilePaths;//整个文件上传文件的数组
            //   const tempFiles=res.tempFiles;//最后选择的一张图片地址
              Taro.uploadFile({
                url: app.apiUri +'/admin/upload/image' , // 仅为示例，非真实的接口地址
                filePath: tempFilePaths[0],  //上传图片的地址
                name:'file', //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
                success(res) {//成功的回调
                    const data = res.data
                    console.log(data);
                  }
              })
            }
          });
    }

    // uploadImg: function() {
    //     var me = this;
    //     wx.chooseImage({
    //       count: 1,
    //       sourceType: ['album'],
    //       sizeType: ['compressed'],
    //       success(res) {
    //         wx.showLoading({
    //           title: '上传中',
    //         })
    //         const tempFilePaths = res.tempFilePaths;
    //         const uploadTask = Taro.uploadFile({
    //           url: {app.imageUri+'web/file/upload'}, //仅为示例，非真实的接口地址
    //           filePath: tempFilePaths[0],
    //           name: 'file',
    //           formData: {
    //             'user': 'test'
    //           },
    //           success(res) {
    //             var data = JSON.parse(res.data);
    //             if (data.result.error == 0) {
    //               me.setData({
    //                 image: app.absolutePath(data.result.path),
    //                 is_show_save_button: true
    //               });
    //             }
    //           }
    //         });
    //       }
    //     })
    //   }
    
    // admin/upload/image



    componentWillMount() { }

    componentDidMount() { }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='dialoging' onClick={this.closeBox}>
                <View className='blank-box-two'></View>
                <View className='header at-row'>
                    <View className='at-col at-col-6 selected' >在线聊天</View>
                    <View className='at-col at-col-6' onClick={this.go.bind(this,'../historyrecord/historyrecord')}>聊天记录</View>
                </View>
                <View className='dialog-table'>
                    <View className='time'>17:20</View>
                    <View className='dialog'>
                        <AtAvatar className='dialog-head all-float'  circle={true}  size='small' image={getGlobalData('baseurl')+'img/d2.jpg'}></AtAvatar>
                        <Text className='dialog-text all-float hi hi-two'>你好很高兴为你提供帮助你好很高兴为你提供帮助你好很高兴为你提供帮助你好，很高兴为你提供帮助你好，很高兴为你提供帮助你好，很高兴为你提供帮助</Text>
                    </View>
                    <View className='dialog'>
                        <View onClick={this.go.bind(this,'../chakanbingli1/chakanbingli1')}>
                        <AtAvatar className='dialog-head left-float ' circle={true}  size='small' image={getGlobalData('baseurl')+'img/d1.jpg'} ></AtAvatar>
                        </View>
                        <View className='dialog-text all-float2'>
                            <View className='hi hi-two'>你好，请问我现在的病情的问题究竟是怎么样</View>
                        </View>
                    </View>  
                    <View className='dialog'>
                        <AtAvatar className='dialog-head all-float'  circle={true}  size='small' image={getGlobalData('baseurl')+'img/d2.jpg'}></AtAvatar>
                        <View className='dialog-text all-float'>
                            <View className='hi hi-two'>你好，很高兴为你提供帮助</View>
                        </View>
                    </View>   
                </View>
                <View className='blank-box' style={this.state.blankBox}></View>
                <View className='send-box' onClick={this.noPropagation}>
                    <View className='send' >
                        <AtInput
                            name='value'
                            type='text'
                            value={this.state.value}
                            onChange={this.handleChange.bind(this)}
                            className='input'
                            style={this.state.inputBox}
                        />
                        <Image src={getGlobalData('baseurl')+'img/send.png'} className='useful-btn' onClick={this.getUseful}></Image>
                        <Image src={getGlobalData('baseurl')+'img/tianjiabingli.png'} className='add-btn' onClick={this.getFunction} style={this.state.addBtn}></Image>
                        {/* <AtIcon value={this.state.soundIcon} size='28' color='#F00' className='voice-btn' onClick={this.getVoice}></AtIcon>  */}
                        <Image src={this.state.soundIcon} className='voice-btn' onClick={this.getVoice}></Image>
                        <View className='send-btn' style={this.state.sendBtn}><AtButton type='primary' size='small'>发送</AtButton></View>
                        <View className='sound' 
                        style={this.state.sound}
                        >
                            <AtButton type='primary' size='small'>按住说话</AtButton>
                        </View>
                    </View>
                    <View className='useful-expressions' style={this.state.usefulBox}>
                        <AtList>
                            <AtListItem title='你好，请问你有什么问题需要问的' />
                            <AtListItem title='这个说您明白了吗' />
                            <AtListItem title='好的，有什么问题欢迎再次咨询' />
                            <AtListItem title='你好，请问你有什么问题需要问的' />
                            <AtListItem title='你好，请问你有什么问题需要问的' />
                            <AtListItem title='这个说您明白了吗' />
                            <AtListItem title='好的，有什么问题欢迎再次咨询' />
                            <AtListItem title='你好，请问你有什么问题需要问的' />
                        </AtList>
                    </View>
                    <View className='big-box' style={this.state.funBox}>
                        <View className='fun-box at-row at-row--wrap at-row__align--center'>
                            <View onClick={this.choosePhotoes} className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                            <View className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                            <View className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                            <View className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                            <View className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                            <View className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                            <View className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                            <View className='at-col at-col-3 fun'>
                                <AtIcon value='image' size='40' color='#F00'></AtIcon>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
// reactMixin.onClass(Dialog,myJs);
